<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			canvas{
				background: #272822;
				position: relative;
			}
		</style>
	</head>
	<body>
		<input type="color" id='yanse'/>
		<br /><br />
		<input type="range" id='cuxi' min='1' max='50' step='1' value='10'/>
		<span id='cx'>10</span>
		<input type="button" id='xiangpi' value='橡皮檫'/>
		<br /><br />
		<canvas id='canvas' width='900' height='500'></canvas>
		<script>
			//获得画板
			var canvas=document.getElementById('canvas');
			//获得绘画环境
			var cv=canvas.getContext('2d');
			//设置笔触的颜色
			cv.strokeStyle='blueviolet';
			//设置笔触的粗细
			cv.lineWidth=10;
			
			//给画板加鼠标按下事件
			canvas.onmousedown=function(e){
				//获得事件对象
				var ev=window.event || e;
				//获得鼠标开始的位置
				var m_start_left=ev.layerX || ev.offsetX;
				var m_start_top=ev.layerY || ev.offsetY;
				
				//开启路径
				cv.beginPath();
				//定义笔触的起始位置
				cv.moveTo(m_start_left,m_start_top);
				//给画板借鼠标移动事件
				canvas.onmousemove=function(e){
					//获得事件对象
					var ev=window.event || e;
					//获得鼠标当前的位置
					var m_new_left=ev.layerX || ev.offsetX;
					var m_new_top=ev.layerY || ev.offsetY;
					//将线条划到这个位置上来
					cv.lineTo(m_new_left,m_new_top);
					cv.stroke();
				}
			}
			
			//鼠标按下事件结束，鼠标抬起事件开始
			
			canvas.onmouseup=function(){
				//取消canvas的鼠标移动事件
				canvas.onmousemove=null;
			}
			//给颜色选择器表单加事件
			document.getElementById('yanse').onchange=function(){
				//给笔触颜色该成当前表单的value
				cv.strokeStyle=this.value;
			}
			//给滑块加表单事件
			document.getElementById('cuxi').onchange=function(){
				//修改 笔触的粗细
				cv.lineWidth=this.value;
				//修改span
				document.getElementById('cx').innerHTML=this.value;
			}
			//加橡皮功能
			document.getElementById('xiangpi').onclick=function(){
				alert('请檫黑板吧');
				//将笔触的颜色改成背景颜色
				cv.strokeStyle="#272822";
			}
		</script>
	</body>
</html>
